<template>
  <!--列表-->
  <router-exact-view name="xschool">
    <div style="width: 100%" class="template-list-page-container">
      <my-table
        v-loading="loading"
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :btn-options="btnOptions"
        title="乡校列表"
        @page-change="handlePageChange"
      >
        <div slot="table-btn">
          <el-button type="primary" @click="addXSchool">新增乡校</el-button>
        </div>
      </my-table>
    </div>
  </router-exact-view>
</template>

<script>
import { getXSchool, addXSchool, deleteXSchool } from '@/api/basic'
import MyTable from '@/components/my-table/index'
import RouterExactView from '@/components/routerExactView'
import { xschoolColumns } from '../columns'

export default {
  components: { RouterExactView, MyTable },
  data() {
    const that = this
    return {
      /* 列表相关 */
      columns: xschoolColumns,
      data: [],
      searchForm: {
      },
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      btnOptions: [
        {
          name: '编辑',
          handler: function(row) {
            that.editXSchool(row)
          }
        },
        {
          name: '删除',
          handler: function(row) {
            that.deleteXSchool(row)
          }
        }
      ]
    }
  },
  mounted() {
    if (this.$route.name === 'xschool') {
      this.handlePageChange()
    }
  },
  methods: {
    async handlePageChange(current, size) {
      if (current) {
        this.pagination.current = current
      }
      if (size) {
        this.pagination.pageSize = size
      }
      this.loading = true
      try {
        const res = await getXSchool({
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
        if (res && res.list) {
          this.data = res.list
          this.pagination = {
            current: res.pageNum,
            pageSize: res.pageSize,
            total: res.totalElements
          }
        }
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
    resetSearchForm() {
      this.searchForm = {}
      this.handlePageChange(1)
    },
    addXSchool() {
      this.$prompt('请输入乡校名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async({ value }) => {
        try {
          const res = await addXSchool({
            schoolName: value
          })
          if (res) {
            this.$message({
              type: 'success',
              message: '新增乡校成功'
            })
            this.handlePageChange(1)
          }
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    editXSchool(row) {
      this.$prompt('请输入乡校名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row.schoolName
      }).then(async({ value }) => {
        try {
          const res = await addXSchool({
            schoolName: value,
            id: row.id
          })
          if (res) {
            this.$message({
              type: 'success',
              message: '编辑乡校成功'
            })
            this.handlePageChange(this.pagination.current)
          }
        } catch (err) {
          console.log(err)
        }
        this.$message({
          type: 'success',
          message: '你的乡校名称是: ' + value
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    deleteXSchool(row) {
      this.$confirm('确认要删除该乡校?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          const res = await deleteXSchool({
            id: row.id
          })
          if (res) {
            this.$message({
              message: `删除乡校成功！`,
              type: 'success'
            })
            this.handlePageChange(this.pagination.current)
          }
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style scoped lang="less">
  @import "../../common.css";
  /* 查询条件容器的样式 */
  .search-area {
    padding: 16px 16px 0;
    margin-bottom: 8px;
    background: #fff;
  }
</style>
